<template>
    <view class="container">
        <!-- 页面标题和操作按钮 -->
        <view class="page-header">
            <view class="title-section">
                <text class="page-title">客户列表</text>
                <text class="page-subtitle">管理所有客户信息</text>
            </view>
            <view class="button-group">
                <button class="add-btn" @click="addCustomer">
                    <i class="fa fa-plus"></i>
                    <text>新增客户</text>
                </button>
            </view>
        </view>
        
        <!-- 搜索和筛选区域 -->
        <view class="search-filter">
            <view class="search-input">
                <i class="fa fa-search"></i>
                <input type="text" placeholder="搜索客户名称、联系人或编号" v-model="searchKey" @input="onSearchInput" />
            </view>
            <view class="filter-group">
                <picker @change="onStatusFilterChange" :value="statusFilterIndex" :range="customersStatus">
                    <view class="filter-item">
                        <text>状态:</text>
                        <text>{{ statusFilterText }}</text>
                        <i class="fa fa-chevron-down"></i>
                    </view>
                </picker>
                <picker @change="onPackageFilterChange" :value="packageFilterIndex" :range="packageOptions">
                    <view class="filter-item">
                        <text>套餐:</text>
                        <text>{{ packageFilterText }}</text>
                        <i class="fa fa-chevron-down"></i>
                    </view>
                </picker>
            </view>
        </view>
        
        <!-- 客户列表 -->
        <view class="customer-list">
            <!-- 列表头部 -->
            <view class="list-header">
                <view class="header-item flex-1">编号</view>
                <view class="header-item flex-2">客户名称</view>
                <view class="header-item flex-3">联系人</view>
                <view class="header-item flex-4">电话</view>
                <view class="header-item flex-5">证件</view>
                <view class="header-item flex-6">合同</view>
                <view class="header-item flex-7">合同有效期</view>
                <view class="header-item flex-8">套餐</view>
                <view class="header-item flex-9">创建人</view>
                <view class="header-item flex-10">操作</view>
            </view>
            
            <!-- 列表内容 -->
            <view class="list-content" v-if="customers.length > 0">
                <view class="list-item" v-for="(customer, index) in displayCustomers" :key="customer.id" :class="{'bg-gray-50': index % 2 === 0}">
                    <view class="item-cell flex-1">{{ customer.id }}</view>
                    <view class="item-cell flex-2 ellipsis">{{ customer.name }}</view>
                    <view class="item-cell flex-3">{{ customer.contactPerson }}</view>
                    <view class="item-cell flex-4">{{ customer.phone }}</view>
                    <view class="item-cell flex-5">
                        <view class="image-container" @click="viewImage(customer.idCardImage, '营业执照/身份证')">
                            <image :src="customer.idCardImage" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="item-cell flex-6">
                        <view class="image-container" @click="viewImage(customer.contractImage, '合同照片')">
                            <image :src="customer.contractImage" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="item-cell flex-7">
                        <view class="contract-period">
                            <text>{{ customer.contractStartDate }}</text>
                            <text class="separator">-</text>
                            <text>{{ customer.contractEndDate }}</text>
                            <view class="status-tag" :class="getStatusClass(customer)">{{ getStatusText(customer) }}</view>
                        </view>
                    </view>
                    <view class="item-cell flex-8">{{ customer.packageName }}</view>
                    <view class="item-cell flex-9">{{ customer.creator }}</view>
                    <view class="item-cell flex-10">
                        <view class="action-buttons">
                            <button class="action-btn view-btn" @click="viewCustomer(customer.id)">
                                <i class="fa fa-eye"></i>
                                <text>查看</text>
                            </button>
                            <button class="action-btn edit-btn" @click="editCustomer(customer.id)">
                                <i class="fa fa-pencil"></i>
                                <text>修改</text>
                            </button>
                            <button class="action-btn disable-btn" @click="toggleCustomerStatus(customer)" v-if="customer.status === 1">
                                <i class="fa fa-ban"></i>
                                <text>禁用</text>
                            </button>
                            <button class="action-btn enable-btn" @click="toggleCustomerStatus(customer)" v-if="customer.status === 0">
                                <i class="fa fa-check-circle"></i>
                                <text>启用</text>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 空状态 -->
            <view class="empty-state" v-else>
                <image src="/static/images/empty-list.png" mode="aspectFit"></image>
                <text>暂无客户数据</text>
                <button class="add-first-btn" @click="addCustomer">
                    <i class="fa fa-plus"></i>
                    <text>添加第一个客户</text>
                </button>
            </view>
        </view>
        
        <!-- 分页控件 -->
        <view class="pagination" v-if="customers.length > 0">
            <button class="page-btn" :disabled="currentPage === 1" @click="prevPage">
                <i class="fa fa-chevron-left"></i>
            </button>
            <view class="page-info">
                <text>{{ currentPage }}</text>
                <text>/</text>
                <text>{{ totalPages }}</text>
            </view>
            <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">
                <i class="fa fa-chevron-right"></i>
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            customers: [],
			customersStatus:['全部状态','申请', '正常', '禁用'],// 所有客户数据
            searchKey: '', // 搜索关键词
            statusFilterIndex: 0, // 状态筛选索引
            statusFilterText: '全部状态', // 状态筛选文本
            packageFilterIndex: 0, // 套餐筛选索引
            packageFilterText: '全部套餐', // 套餐筛选文本
            packageOptions: ['全部套餐', '基础套餐', '高级套餐', '尊享套餐'], // 套餐选项
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页显示数量
            totalPages: 1, // 总页数
            loading: false, // 加载状态
            showImageViewer: false, // 是否显示图片查看器
            currentImage: '', // 当前查看的图片
            imageTitle: '' // 图片标题
        }
    },
    mounted() {
        // 页面加载时获取客户数据
        this.getCustomers();
    },
computed: {
    displayCustomers() {
        // 如果没有搜索关键词，直接返回全部客户
        if (!this.searchKey.trim()) {
            return this.customers;
        }
        
        // 有关键词时，进行多字段搜索
        const searchTerm = this.searchKey.toLowerCase().trim();
        return this.customers.filter(customer => {
            // 检查客户名称、联系人、编号、电话等字段
            return (
                customer.name.toLowerCase().includes(searchTerm) ||
                customer.contactPerson.toLowerCase().includes(searchTerm) ||
                customer.id.toLowerCase().includes(searchTerm) ||
                customer.phone.includes(searchTerm) ||
                (customer.packageName && customer.packageName.toLowerCase().includes(searchTerm))
            );
        });
    }
},
    methods: {
        // 获取客户数据
      getCustomers() {
                   
     
               this.customers = [
                    {
                        id: 'C0001',
                        name: '深圳贸易公司',
                        contactPerson: '张三',
                        phone: '13800138000',
                        idCardImage: 'https://picsum.photos/200/300?random=1',
                        contractImage: 'https://picsum.photos/200/300?random=2',
                        contractStartDate: '2023-01-01',
                        contractEndDate: '2024-12-31',
                        packageName: '高级套餐',
                        creator: '管理员',
                        status: 1 ,// 1: 正常, 0: 禁用
				     },
                    {
                        id: 'C0002',
                        name: '广州市贸易有限公司',
                        contactPerson: '李四',
                        phone: '13900139000',
                        idCardImage: 'https://picsum.photos/200/300?random=3',
                        contractImage: 'https://picsum.photos/200/300?random=4',
                        contractStartDate: '2023-03-15',
                        contractEndDate: '2024-03-14',
                        packageName: '基础套餐',
                        creator: '管理员',
                        status: 1,
						
                    },
                    {
                        id: 'C0003',
                        name: '北京市咨询有限公司',
                        contactPerson: '王五',
                        phone: '13700137000',
                        idCardImage: 'https://picsum.photos/200/300?random=5',
                        contractImage: 'https://picsum.photos/200/300?random=6',
                        contractStartDate: '2022-10-20',
                        contractEndDate: '2023-10-19',
                        packageName: '尊享套餐',
                        creator: '张经理',
                        status: 0,
					
                    },
                    // 更多示例数据...
                ];
                
                // 计算总页数
               // this.totalPages = Math.ceil(this.customers.length / this.pageSize);
                
                // 筛选并分页数据
               // this.filterAndPaginateCustomers();
                
            
            
        },
        
        // 筛选并分页客户数据
        filterAndPaginateCustomers() {
            // 先根据搜索关键词和筛选条件过滤数据
            let filteredCustomers = this.customers.filter(customer => {
                // 搜索过滤
                const searchMatch = 
                    customer.name.includes(this.searchKey) ||
                    customer.contactPerson.includes(this.searchKey) ||
                    customer.id.includes(this.searchKey) ||
                    customer.phone.includes(this.searchKey);
                
                // 状态过滤
                let statusMatch = true;
                if (this.statusFilterIndex === 1) { // 正常
                    statusMatch = customer.status === 1;
                } else if (this.statusFilterIndex === 2) { // 禁用
                    statusMatch = customer.status === 0;
                }
                
                // 套餐过滤
                let packageMatch = true;
                if (this.packageFilterIndex > 0) {
                    packageMatch = customer.packageName === this.packageOptions[this.packageFilterIndex];
                }
                
                return searchMatch && statusMatch && packageMatch;
            });
            
            // 计算当前页显示的数据
            const startIndex = (this.currentPage - 1) * this.pageSize;
            const endIndex = Math.min(startIndex + this.pageSize, filteredCustomers.length);
            this.displayCustomers = filteredCustomers.slice(startIndex, endIndex);
            
            // 更新总页数
            this.totalPages = Math.ceil(filteredCustomers.length / this.pageSize);
            if (this.currentPage > this.totalPages && this.totalPages > 0) {
                this.currentPage = this.totalPages;
                this.filterAndPaginateCustomers();
            }
        },
        
        // 搜索输入事件处理
        onSearchInput() {
            this.currentPage = 1; // 重置页码
   
        },
        
        // 状态筛选事件处理
        onStatusFilterChange(e) {
            this.statusFilterIndex = e.detail.value;
            this.statusFilterText = ['全部状态', '正常', '禁用'][e.detail.value];
            this.currentPage = 1; // 重置页码
           
        },
        
        // 套餐筛选事件处理
        onPackageFilterChange(e) {
            this.packageFilterIndex = e.detail.value;
            this.packageFilterText = this.packageOptions[e.detail.value];
            this.currentPage = 1; // 重置页码
   
        },
        
        // 上一页
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.filterAndPaginateCustomers();
            }
        },
        
        // 下一页
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
                this.filterAndPaginateCustomers();
            }
        },
        
        // 获取合同状态文本
        getStatusText(customer) {
            // 检查是否禁用
            if (customer.status === 0) return '已禁用';
            
            // 检查合同是否过期
            const today = new Date();
            const endDate = new Date(customer.contractEndDate);
            
            if (endDate < today) {
                return '已过期';
            } else {
                // 计算剩余天数
                const diffTime = Math.abs(endDate - today);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                
                if (diffDays <= 30) {
                    return '即将到期';
                } else {
                    return '正常';
                }
            }
        },
        
        // 获取合同状态样式
        getStatusClass(customer) {
            if (customer.status === 0) return 'status-disabled';
            
            const today = new Date();
            const endDate = new Date(customer.contractEndDate);
            
            if (endDate < today) {
                return 'status-expired';
            } else {
                const diffTime = Math.abs(endDate - today);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                
                if (diffDays <= 30) {
                    return 'status-soon';
                } else {
                    return 'status-normal';
                }
            }
        },
        
        // 查看客户详情
        viewCustomer(id) {
            uni.navigateTo({
                url: `/pages/customer/detail?id=${id}`
            });
        },
        
        // 新增客户
        addCustomer() {
   uni.$emit('open','wmsAddCustomer')
        },
        
        // 编辑客户
        editCustomer(id) {
            uni.navigateTo({
                url: `/pages/customer/edit?id=${id}`
            });
        },
        
        // 切换客户状态
        toggleCustomerStatus(customer) {
            const newStatus = customer.status === 1 ? 0 : 1;
            const statusText = newStatus === 1 ? '启用' : '禁用';
            
            uni.showModal({
                title: `确认${statusText}`,
                content: `您确定要${statusText}客户 "${customer.name}" 吗？`,
                success: (res) => {
                    if (res.confirm) {
                        // 模拟API请求更新客户状态
                        uni.showLoading({
                            title: `${statusText}中...`
                        });
                        
                        setTimeout(() => {
                            // 找到客户并更新状态
                            const index = this.customers.findIndex(item => item.id === customer.id);
                            if (index !== -1) {
                                this.customers[index].status = newStatus;
                                this.filterAndPaginateCustomers();
                                
                                uni.hideLoading();
                                uni.showToast({
                                    title: `${statusText}成功`,
                                    icon: 'success'
                                });
                            }
                        }, 800);
                    }
                }
            });
        },
        
        // 查看图片
        viewImage(imageUrl, title) {
            this.currentImage = imageUrl;
            this.imageTitle = title;
            this.showImageViewer = true;
            
            // 使用uni.previewImage显示大图
            uni.previewImage({
                urls: [imageUrl],
                current: imageUrl,
                success: () => {
                    this.showImageViewer = false;
                },
                fail: () => {
                    this.showImageViewer = false;
                    uni.showToast({
                        title: '查看图片失败',
                        icon: 'none'
                    });
                }
            });
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
	margin-bottom: 200rpx;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
}

.title-section .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.title-section .page-subtitle {
    font-size: 24rpx;
    color: #666;
    margin-top: 6rpx;
}

.add-btn {
    background-color: #165DFF;
    color: white;
    border-radius: 8rpx;
    padding: 14rpx 24rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
}

.add-btn i {
    margin-right: 10rpx;
}

.search-filter {
    background-color: white;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.search-input {
    position: relative;
    border: 1rpx solid #e5e6eb;
    border-radius: 8rpx;
    padding: 14rpx 20rpx;
    margin-bottom: 20rpx;
}

.search-input i {
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #86909c;
}

.search-input input {
    width: 100%;
    padding-left: 40rpx;
    font-size: 28rpx;
    color: #333;
}

.filter-group {
    display: flex;
    justify-content: space-between;
}

.filter-item {
    border: 1rpx solid #e5e6eb;
    border-radius: 8rpx;
    padding: 14rpx 20rpx;
    width: 48%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
}

.filter-item i {
    color: #86909c;
}

.customer-list {
    background-color: white;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.list-header {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #e5e6eb;
    background-color: #f8f9fa;
}

.header-item {
    font-weight: bold;
    color: #4e5969;
    font-size: 26rpx;
    padding: 0 20rpx;
    text-align: center;
}

.list-content {
    max-height: 1200rpx;
    overflow-y: auto;
}

.list-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f2f3f5;
    transition: background-color 0.2s;
}

.list-item:hover {
    background-color: #f5f7fa;
}

.item-cell {
    font-size: 26rpx;
    color: #666;
    padding: 0 20rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-container {
    width: 60rpx;
    height: 60rpx;
    border-radius: 8rpx;
    overflow: hidden;
    cursor: pointer;
}
.flex-1{
	width: 5%;
}
.flex-2{
	width: 15%;
}
.flex-3{
	width: 8%;
}
.flex-4{
		width: 8%;
}
.flex-5{
		width: 5%;
}
.flex-6{
		width: 5%;
}
.flex-7{
		width: 15%;
}
.flex-8{
		width: 8%;
}
.flex-9{
		width: 8%;
}
.flex-10{
	flex: 20%;
}


.image-container image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contract-period {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contract-period text {
    font-size: 26rpx;
}

.contract-period .separator {
    margin: 0 6rpx;
}

.status-tag {
    font-size: 22rpx;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
    margin-top: 4rpx;
}

.status-normal {
    background-color: rgba(0, 180, 42, 0.1);
    color: #00b42a;
}

.status-soon {
    background-color: rgba(255, 125, 0, 0.1);
    color: #ff7d00;
}

.status-expired {
    background-color: rgba(245, 63, 63, 0.1);
    color: #f53f3f;
}

.status-disabled {
    background-color: rgba(153, 153, 153, 0.1);
    color: #999;
}

.action-buttons {
    display: flex;
    justify-content: center;
}

.action-btn {
    padding: 8rpx 16rpx;
    border-radius: 6rpx;
    margin: 0 6rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
}

.action-btn i {
    margin-right: 6rpx;
}

.view-btn {
    color: #165DFF;
    background-color: rgba(22, 93, 255, 0.1);
}

.edit-btn {
    color: #00B42A;
    background-color: rgba(0, 180, 42, 0.1);
}

.disable-btn {
    color: #F53F3F;
    background-color: rgba(245, 63, 63, 0.1);
}

.enable-btn {
    color: #165DFF;
    background-color: rgba(22, 93, 255, 0.1);
}

.empty-state {
    padding: 80rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-state image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
}

.empty-state text {
    font-size: 28rpx;
    color: #86909c;
    margin-bottom: 40rpx;
}

.add-first-btn {
    background-color: #165DFF;
    color: white;
    border-radius: 8rpx;
    padding: 14rpx 30rpx;
    font-size: 28rpx;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30rpx;
}

.page-btn {
    width: 80rpx;
    height: 80rpx;
    border: 1rpx solid #e5e6eb;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #4e5969;
    margin: 0 20rpx;
}

.page-btn:disabled {
    color: #c9cdd4;
    background-color: #f2f3f5;
}

.page-info {
    font-size: 28rpx;
    color: #4e5969;
}
</style>    